<template>
  <div class="Page_box">
    <el-row class="mt">
      <!-- tabs -->
      <el-col :span="19" class="ta mt">
        <!-- 轮播图 -->

        <el-carousel trigger="click" height="500px" width="100%">
          <el-carousel-item v-for="item in carouselList" :key="item">
            <h3 class="small justify-center" text="2xl">
              <img :src="'http://101.132.181.9/api/' + item.imgPath" alt="" />
            </h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <!-- 手机区域 -->
    <h2>手机</h2>
    <div>
      <div class="dsf">
        <div class="page_left">
          <img
            src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
            alt=""
          />
        </div>

        <div>
          <ul class="dsf1">
            <li class="lis" v-for="item in productList" :key="item.product_id">
              <div class="dsf1_box" @click="skipDetail(item, item.product_id)">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <h2>家电</h2>
    <div class="dsf">
      <div class="page_left2">
        <img
          src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
          alt=""
        />
        <img
          src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo2.png"
          alt=""
        />
      </div>
      <div>
        <ul class="dsf1">
          <li class="lis" v-for="item in AppliancesList" :key="item.product_id">
            <div class="dsf1_box">
              <img
                :src="'http://101.132.181.9/api/' + item.product_picture"
                alt=""
              />

              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p>{{ item.product_price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <h2>
      <div>配件</div>
      <div></div>
    </h2>
    <div class="dsf">
      <div class="page_left2">
        <img
          src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
          alt=""
        />
      </div>
      <div>
        <ul class="dsf1">
          <li
            class="lis"
            v-for="(item, index) in ProtectiveList"
            :key="item.product_id"
            v-show="index < 4"
          >
            <div class="dsf1_box">
              <img
                :src="'http://101.132.181.9/api/' + item.product_picture"
                alt=""
                class="imgs"
              />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p>{{ item.product_price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="dsf">
      <div class="page_left2">
        <img
          src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
          alt=""
        />
      </div>
      <div>
        <ul class="dsf1">
          <li
            class="lis"
            v-for="(item, index) in ChargerList"
            :key="item.product_id"
            v-show="index < 3"
          >
            <div class="dsf1_box">
              <img
                :src="'http://101.132.181.9/api/' + item.product_picture"
                alt=""
                class="imgs"
              />
              <p>{{ item.product_name }}</p>
              <p>{{ item.product_title }}</p>
              <p>{{ item.product_price }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import {
  getCarouselApi,
  getProductApi,
  getPromoApi,
  getProtectiveApi,
  getChargerApi,
  getAppliancesApi,
} from "@/http/api.js";
export default {
  name: "Page",
  components: {},
  setup() {
    const { proxy } = getCurrentInstance();
    // 引入路由
    const router = useRouter();
    // 引入仓库
    const store = useStore();
    const data = reactive({
      carouselList: [],
      categoryName: "手机",
      productList: [],
      PromoList: [],
      ProtectiveList: [],
      ChargerList: [],
      AppliancesList: [],
    });

    //轮播图Api
    getCarouselApi().then((res) => {
      // console.log(res, "轮播图Api");
      data.carouselList = res.carousel;
    });
    //手机区域Api
    getProductApi(data).then((res) => {
      // console.log(res, "手机区域");
      data.productList = res.Product;
    });

    //家电
    const getAppliances = () => {
      let categoryName = ["电视机", "空调", "洗衣机"];
      getAppliancesApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "家电");
        data.AppliancesList = res.Product;
      });
    };
    //电视Api
    const getElectrical = () => {
      let categoryName = ["电视机"];
      getPromoApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "电视Api");
        data.PromoList = res.Product;
      });
    };
    //保护套Api
    const getProtective = () => {
      let categoryName = ["保护套"];
      getProtectiveApi({ categoryName: categoryName }).then((res) => {
        console.log(res);
        data.ProtectiveList = res.Product;
      });
    };
    const getCharger = () => {
      let categoryName = ["充电器"];
      getChargerApi({ categoryName: categoryName }).then((res) => {
        console.log(res);
        data.ChargerList = res.Product;
      });
    };
    const skipDetail = (obj) => {
      console.log(obj, "数据");
      store.commit("detail", obj);
      router.push(`detail`);
    };
    getElectrical();
    getProtective();
    getCharger();
    getAppliances();
    return {
      ...toRefs(data),
      skipDetail,
    };
  },
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
h2 {
  font-size: 30px;
  margin: 30px 0 20px 0;
}
.Page_box {
  width: 1225.5;
  margin-left: 280px;
}
.dsf {
  display: flex;
  .page_left {
    width: 234px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .page_left2 {
    display: flex;
    flex-direction: column;
  }
  .dsf1 {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    li {
      width: 25%;
      height: 50%;
      text-align: center;
      .dsf1_box {
        margin-top: 20px;
      }
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
